<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:replace="fragments/header :: common-header">
    <title>投票结果 - 景点投票系统</title>
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
<div th:replace="fragments/navbar :: navbar"></div>

<div class="container mt-4">
    <h2 class="mb-4">投票结果统计</h2>

    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">景点投票分布图</h5>
                </div>
                <div class="card-body">
                    <div id="barChart" style="height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">投票比例</h5>
                </div>
                <div class="card-body">
                    <div id="pieChart" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">详细数据</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>排名</th>
                        <th>景点名称</th>
                        <th>票数</th>
                        <th>占比</th>
                        <th>位置</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="spot, stat : ${spots}">
                        <td th:text="${stat.count}"></td>
                        <td th:text="${spot.name}"></td>
                        <td th:text="${spot.voteCount}"></td>
                        <td>
                            <div class="progress" style="height: 20px;">
                                <div class="progress-bar" role="progressbar"
                                     th:attr="style='width:' + ${#numbers.formatDecimal(spot.voteCount / #lists.sum(spots.![voteCount]) * 100, 1, 2)} + '%;'"
                                     th:text="${#numbers.formatDecimal(spot.voteCount / #lists.sum(spots.![voteCount]) * 100, 1, 2)} + '%'">
                                </div>
                            </div>
                        </td>
                        <td th:text="${spot.location} ?: '位置未知'"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Custom JS -->
<script th:inline="javascript">
    /*<![CDATA[*/
    // 柱状图数据
    var barChartData = {
        categories: [[${#strings.listJoin(spots.![name], '","')}]],
        data: [[${#strings.listJoin(spots.![voteCount], ',')}]]
    };

    // 饼图数据
    var pieChartData = [
        /*[# th:each="spot : ${spots}" ]*/
        {
            name: [[${spot.name}]],
            value: [[${spot.voteCount}]]
        }/*[# th:unless="${#lists.last(spots)}"]*/,/*[/]*/
        /*[/]*/
    ];
    /*]]>*/
</script>
<script th:src="@{/js/chart.js}"></script>
</body>
</html>